* {
    margin: 0;
    padding: 0;
    
}
html,
body {
    font-size: 2vh;
    overflow: hidden;
    width: 100vw;
    --maincolor:rgb(85, 85, 224);
    --lightmaincolor:rgb(104, 104, 252);
    --weightmaincolor:rgb(47, 47, 150);
    --pagecolor:rgb(241, 239, 239);
    --buttonshadow1:white;
    --buttonshadow2:rgb(121, 117, 117);
    
}
.container {
    width: 100%;
    height: 100vh;
    
    display: flex;
}
.nav {
    width: 20%;
    height: 100%;
    box-shadow: 0px 0px 0px 4px rgb(0, 0, 0);
    background-color: var(--maincolor);
}
.nav-item{
    width: 100%;
    height: 5rem;
    font-size: 2rem;
    text-align: center;
    padding-top: 2rem;
    background-color: white;
}
#nav-item1 {
    margin-top: 50%;
}
#nav-item2{
    margin-top: 3rem;
}



.page {
    width: 80%;
    height: 100vh;
    background-color: var(--pagecolor);

}
.page-hd {
    width: 100%;
    height: 10%;
 
    padding: 1rem;
}
.hd-button {
    height: 4rem;
    width: 15rem;
    font-size: 1.5rem;
    background-color: var(--maincolor);
    border-radius: 4rem;
    text-align: center;
    color:white;
    line-height: 4rem;
    box-shadow: -2px -2px 4px 0 var(--buttonshadow1),2px 2px 4px 0 var(--buttonshadow2);
}

.hd-button:active{

    background-color: var(--maincolor);
    box-shadow: inset 2px 2px 4px 0 var(--weightmaincolor),inset -2px -2px 4px 0 var(--buttonshadow1);
}

/* 奖品项 */
.award{
    width: 80%;
    height: 80%;
    margin-top:1rem;
    margin-left:2rem;
    display: flex;

    align-items: center;
    background-color: white;
    font-size: 1.3rem;

}
.award-image {
    width: 20%;
    text-align: center;
}
.award-image > img {
    width: 2.3rem;
    height: 2.3rem;

}
.award-id {
    width: 10%;
}
.award-title {
    width: 30%;
}
.award-probability {
    width: 10%;
}
.award-quantity {
    width: 10%;
}
.award-changeButton {
    width: 10%;
    height: 60%;
    padding-top: 0.6rem;
    text-align: center;
    color:white;
    border-radius: 2rem;
    background-color: var(--maincolor);
    box-shadow: -2px -2px 4px 0 var(--buttonshadow1),2px 2px 4px 0 var(--buttonshadow2);

}
.award-changeButton:active{

    background-color: var(--maincolor);
    box-shadow: inset 2px 2px 4px 0 var(--weightmaincolor),inset -2px -2px 4px 0 var(--buttonshadow1);
}
